<template>
  <div class="Tab">
    <div class="tab-container">
      <div class="tab-menu">
        <!-- 覆盖tab的盒子 -->
        <div v-show="isVisible" class="Max_fu">
          <div class="fu_tab">

            <div v-if="loading" class="loading-overlay">
              Loading...
            </div>
            <div class="box-container" ref="containerRef" >
              <div class="warps" >
                <div v-for="(item,index) in repeatedData" :key="index" class="warp-navs"  @click="handleClick(item,index)" :class="indexofs==index?'sql':''">
                      {{ item.title }}
                </div>
              </div>
              <div class="boxs">
              <div class="navs" v-for="(item,index) in dates" :key="index" :class="indexofs==index?'sql':''" @click="handleClick(item,index)">
              {{month}}-{{item}}
              </div>
              </div>
              <div class="hooks">
                 <div class="hooks-nav" v-for="(item,index) in repeatedDatas" :key="index" :class="indexofs==index?'sql':''" @click="handleClick(item,index)" >
                      <div> {{ item.titles }}</div>
                </div>
              </div>
            </div>
            <van-cell  class="btn" title='全部日期'  @click="show = true" />
             <van-calendar v-model:show="show" @confirm="onConfirm" :show-confirm="false" position="top" />
            <span style="border-radius: 5px;background-color: #FFF8EB;padding: 10px; color: #FFAC03;
             font-size: 12px;margin-left: 10%;">8:30放12月02号的号源，是否有号以医院实际排版为准</span>
          </div>
          <div class="List" v-for="(item,index) in doclist" :key="index">
            <div>
              <img style="width: 50px; height: 50px;margin: 10px;border-radius: 100%"
              :src="item.doctorimage">
            <p style="font-size: 16px; padding-top: 10px"><b>{{ item.doctorname }}</b> &ensp;<span
                style="font-size: 12px"><b>{{ item.doctorstate }}</b></span></p>
            <p>{{ item.doctoradministre }} | {{item.doctorcity}}医院</p>
            <p class="pp">{{ item.doctordescword }}</p>
            <button class="brn_tn"><b>去挂号</b></button>
            </div>
          </div>
        </div>
        <div class="tab-containersn" v-if="!isVisible">
            <div class="tabs">
                    <div v-for="(item, index) in listarr" :key="index" @click="changeindex(item, index)"
                      :class="indexs == index ? 'bg' : ''">
                      {{ item.adminname }}
                    </div>
                  </div>

                  <div class="rigth">
                    <div v-for="(item, index) in citylist" :key="index">
                      <div v-if="item.adminname == titles">
                        <div class="right-key" @click="toggleVisibility(item)">{{ item.adminchildrenname }}</div>
                      </div>
                    </div>
                  </div>
        </div>
        </div>  
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ref ,onMounted,computed} from 'vue';
import { useRouter,useRoute } from 'vue-router';
export default {
  setup() {
    const listarr = ref([])
    const loading = ref(false);
    const highlightedBox = ref(null);// 点击科室挂号日期
    const containerRef = ref(null);
    const indexs=ref(1)
    const titles=ref('')
    const citylist=ref([])
    const doclist=ref([])
    const activeTab = ref(1)
    const router = useRouter()    
    const isVisible = ref(false); // 初始状态为隐藏
    const route=useRoute()
    const dates = ref([]);
    const year = ref(2024); // 可以改为动态获取当前年份
    const month = ref(12)
    const nolist=ref([])
    const items=JSON.parse(route.query.item)
    const  store=ref('')
    const date = ref('');
    const show = ref(false);
    const indexofs=ref(0)
    const titlenav=ref('')
    const doctab=ref([])
    // 把点击数据赋值
    const toggleVisibility = (item) => {
      isVisible.value = !isVisible.value; // 切换可见性
      store.value=item.adminchildrenname
      userlist()
    };
    const porens=ref([{titles:"有号"},{titles:"无号"}])
    const days=ref([{title:'周日'},{title:"周一"},{title:"周二"},{title:"周三"},{title:"周四"},{title:"周五"},{title:"周六"}])
    // 复制周一到周日数据
    const  repeatedData = computed(() => {
      let result = [];
        let index = 0;
      while (result.length <= 30) {
        result.push(days.value[index]);
        index = (index + 1) % days.value.length;
      }
     return result;
    });
    // 复制有号无号数据
   const  repeatedDatas= computed(() => {
      let result = [];
        let index = 0;
      while (result.length <= 30) {
         result.push(porens.value[index]);
        index = (index + 1) % porens.value.length;
      }
     return result;
    });
    // 获取一个月的时间
    onMounted(()=>{
      dates.value = getDatesInMonth(year.value, month.value);
    })
     function getDatesInMonth(year, month) {
      const d = new Date(year, month, 0);
      return Array.from({ length: d.getDate() }, (_, i) => i + 1);
    }
    // 点击左侧数据右侧显示对应数据
    const changeindex=(item,index)=>{
      indexs.value=index
      titles.value=item.adminname
    }
    const handleClick = async (item,index) => {
      loading.value = true;
      // 显示 loading 半秒
      await new Promise((resolve) => setTimeout(resolve, 300));
      loading.value = false;
      indexofs.value = index;
      console.log(item);
      if(item.titles=='无号'){
        doclist.value=[]
      }
      if(item.titles=='有号'){
        doclist.value=doctab.value
      }
       // 滚动到被点击的盒子
      const box = containerRef.value.children[index + 4];
      if (box) {
        box.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    };
    // 选择单个日期
    const formatDate = (date) => {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    };
    const onConfirm = (value) => {
      show.value = false;

      date.value = formatDate(value);
      console.log(date.value);
    
      indexofs.value=date.value.slice(8)-1
    };
    // 左侧数据
    const sortlist=async()=>{
      await axios.get('/api/sort').then(res=>{
       listarr.value=res.data.res.slice(2,4)
      })
    }
    sortlist()
    // 右侧数据
     const stabsql=async()=>{
      await axios.get('/api/tabsql').then(res=>{
        citylist.value=res.data.res
      })
    }
    stabsql()
     const userlist=async()=>{
     await axios.get('/api/doctorlist').then(res=>{
      // 筛选出来的数据
      doclist.value=res.data.res.filter(s=>s.doctoradministre==store.value).slice(0,1)
      doctab.value=res.data.res.filter(s=>s.doctoradministre==store.value).slice(0,1)
      })
    }
    return {
titlenav,
      indexofs,
      listarr,
      porens,
      nolist,
      activeTab,
      isVisible,
      toggleVisibility,
      loading,
      doclist,
      highlightedBox,
      days,
      handleClick,
      containerRef,
      show,
      store,
      date,
      repeatedData,
      onConfirm,
      sortlist,
      items,
      changeindex,
      stabsql,
      indexs,
      dates,
      titles,
      citylist,
      year,
      repeatedDatas,
      month
    }
  }
}

</script>

<style scoped lang="scss">

.navs{
  width: 70px;
  height:20px;
  background:#F6F6F6 ;
  text-align: center;
  line-height: 20px;
  margin-left: 10px;
}
.warps{
  display: flex;
  width: 2600px;
  .warp-navs{
  width: 70px;
  height:20px;
  margin-left: 10px;
  background: #F6F6F6;
  margin-top: 10px;
  text-align: center;
  line-height: 20px;
  }
}
.hooks{
  display: flex;
  width: 2600px;
  .hooks-nav{
  width: 70px;
  height:20px;
  margin-left: 10px;
  text-align: center;
  line-height: 20px;
  background: #F6F6F6;
  .bg{
    color: #0FBE8C;
    width: 70px;
    float: left;
    height:20px;
    background: #F6F6F6;
     }
  }
}
.boxs{
  display: flex;
  width: 2600px;
}

.tab-container {
  display: flex;
  padding-top: 5px;
}

.tab-menu {
  width: 100%;
}


.tab-content {
  width: 60%;
}

.Max_fu {
  position: absolute;
  /* 使用absolute定位子元素 */
  top: 117;
  left: 0;
  width: 100%;
  /* 子元素宽度填满父元素 */
  height: 80%;
  /* 子元素高度填满父元素 */
  background: #ebe9e9;
  /* 初始隐藏子元素 */
}

.fu_tab {
  width: 98%;
  height: 18vh;
  background: #fff;
  position: relative;
}

.fu_list {
  width: 92%;
  margin-top: 15px;
  height: 14vh;
  background: #fff;
  margin-left: 4%;
  border-radius: 15px;
}

.List {
  width: 94%;
  height: 15vh;
  border-radius: 15px;
  margin-left: 3%;
  position: relative;
  margin-top: 10px;
  background: #fff;
}

.List img {
  float: left;
}

.pp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 设置显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em;
  /* 设置行高 */
  max-height: 3em;
  /* 设置最大高度，等于行高乘以行数 */
  font-size: 14px;
}

.brn_tn {
  width: 80px;
  height: 30px;
  background: #00BE8C;
  color: #fff;
  position: absolute;
  top: 10px;
  left: 75%;
  border-radius: 15px;
  border: none;
}

.box-container {
  width: 357px;
  height: 90px;
  overflow:auto;
  .sql{
     width: 70px;
     height: 20px;
     background: #00BE8C;
     color: #fff;
  }
}


.box {
  min-width: 50px;
  height: 70px;
  margin: 10px;
  background-color: #f0f0f0;
text-align: center;
line-height: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.box.highlighted {
  background-color: #ffeb3b;
  /* 高亮背景色 */
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.btn {
  width: 70px;
  height: 80px;
  font-size: 15px;
  position: absolute;
  left: 80%;
  top: 5px;
  border: none;
  background: #fff;
  z-index: 999;
}
.bg{
  width: 150px;
  color:#0FBE8C;
  background: #fff;
}
.tab-containersn{
  width: 100%;
   height: 100%;
   display: flex;
   .tabs{
    width: 340px;
    height: 100vh;
    background: #FAFAFA;
    >div{
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
    }
   }
   .rigth{
    width: 500px;
    height: 100vh;
    overflow-y: auto;
    .right-key{
      height: 40px;
    line-height: 40px;
    padding-left: 30px;
    }
   }
}
</style>